<template>
    <view>
        <view class="button-container" :class="[{ 'scale-animation': isClicked }]" @tap="handleTap()"
            :style="{ 'width': width, 'height': height }">
            <up-image class="button-bg" :height="height" :width="width" :src="image" :showMenuByLongpress="false" />
            <view class="button-text">{{ props.text }}</view>
        </view>
    </view>
</template>

<script lang="ts" setup>


import { ref, defineEmits, defineProps } from 'vue'

import { onLoad } from '@dcloudio/uni-app'


const emit = defineEmits(['mytap'])

const isClicked = ref(false)

const props = defineProps({
    image: String,
    enabled_pulling:{
        type:Boolean,
        default:false
    },
    pulling_left:{
        type:Boolean,
        default:false
    },
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '100%'
    },
    text: {
        type: String,
        default: ''
    }
})

const handleTap = () => {
    if(isClicked.value){
        return
    }
    isClicked.value = true; // 触发动画
    
    setTimeout(() => {
        isClicked.value = false; // 动画结束后恢复
        emit('mytap')
    }, 80); // 动画持续时间


}


</script>

<style scoped>

.scale-animation {
    /* transform: scale(0.94); */

    animation: shrink-and-restore 0.2s ease-in-out;
    /* 缩小 5% */
}
.pulling-left-animation {
    transform: scaleX(1.05);
    /* 缩小 5% */
}

/* 应用动画到元素 */

.button-container {
    transform-origin: center;
    overflow: hidden;
    position: relative;
    /* 设置按钮高度 */
    border: none;
    /* 去掉边框 */
    border-radius: 16rpx;
    /* 圆角 */
    background-size: cover;
    /* 背景图片覆盖整个按钮 */
    background-position: center;
    /* 背景图片居中 */
    color: white;
    /* 文字颜色 */
    font-size: 18px;
    /* 文字大小 */
    font-weight: bold;
}


.button-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 图片覆盖整个按钮 */
    z-index: 1;
    /* 背景层 */
}

/* 按钮文字 */
.button-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* position: relative; */
    z-index: 2;
    /* 文字在上层 */
    color: white;
    /* 文字颜色 */
    font-size: 18px;
    /* 文字大小 */
    font-weight: bold;
    /* 文字加粗 */
}

.sibling {

    border-radius: 0 0 15rpx;
}
</style>